<template>
	<view class="search_q">
		<view class="search_q_tip">为您找到 {{ key }} 相关结果约{{ searchResult.data.length }}个</view>
		<custom-news-list :item="searchResult"></custom-news-list>
		<custom-gotop v-show="isShowGoTop"></custom-gotop>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowGoTop: false,
			searchResult: {
				data: []
			},
			loading: false,
			loaded: false,
			pn: 0,
			key: ''
		};
	},
	onLoad(ops) {
		this.key = ops.k;
		this.getSearchResult(this.key);
	},
	onPullDownRefresh() {
		this.getSearchResult(this.key).finally(()=>{
			uni.stopPullDownRefresh()
		});
	},
	onReachBottom() {
		let that = this;
		if (!that.loading && !that.loaded) {
			that.loading = true;
			uni.showLoading({
				title: '正在拉取中',
				mask: true,
				complete() {
					that.getSearchResult({ key: that.key, pn: that.pn + 1 }).finally(() => {
						that.loading = false;
						that.pn += 1;
						uni.hideLoading();
					});
				}
			});
		}
	},
	methods: {
		getSearchResult(key) {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getSearchResultData', { key: key })
					.then(res => {
						that.searchResult.data = that.pn > 0 ? that.searchResult.data.concat(res.data) : res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		onPageScroll(v) {
			if (v.scrollTop >= 200) {
				this.isShowGoTop = true;
			} else {
				this.isShowGoTop = false;
			}
		}
	}
};
</script>

<style lang="less">
.search_q {
	padding:80rpx 0 0;
	.search_q_tip {
		padding: 20rpx 20rpx;
		color: #999;
		font-size: 28rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 99999;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
	}
}
</style>
